class Magnifier {
    constructor() {
        this.container_ele = document.querySelector(".preview-pic");
        this.small_box_ele = document.querySelector(".image-zoom-wrap");
        this.small_img_ele = document.querySelector(".image-zoom-wrap img")
        this.focus_ele = document.querySelector(".image-zoom");
        this.big_box_ele = document.querySelector(".image-retina");
        this.big_img_ele = document.querySelector(".image-retina img");
        this.tab_eles = document.querySelectorAll(".thumbnail-list img");

        // 获取container元素的偏移; 
        this.container_offset = {
            x: this.container_ele.offsetLeft,
            y: this.container_ele.offsetTop
        }
        // 获取container的宽度和高度; 
        let container_css_temp = getComputedStyle(this.container_ele);
        this.container_size = {
            width: parseInt(container_css_temp.width),
            height: parseInt(container_css_temp.height)
        }

        // 获取focus_ele 的x值和 y值; 
        // - 用offset获取宽高不行，因为我们的元素是隐藏的; 
        // - 选择使用 getComputedStyle 获取元素的宽高; 

        let focus_css_temp = getComputedStyle(this.focus_ele);
        this.focus_size = {
            width: parseInt(focus_css_temp.width),
            height: parseInt(focus_css_temp.height)
        }
        // 获取大图的尺寸; 
        let big_img_css_temp = getComputedStyle(this.big_img_ele);
        this.big_img_size = {
            width: parseInt(big_img_css_temp.width),
            height: parseInt(big_img_css_temp.height)
        }
        // 获取大图焦点的尺寸; 
        let big_box_css_temp = getComputedStyle(this.big_box_ele);
        this.big_box_size = {
            width: parseInt(big_box_css_temp.width),
            height: parseInt(big_box_css_temp.height)
        }
        // 直接计算大图最大的移动距离; 
        this.big_max = {
            x: this.big_img_size.width - this.big_box_size.width,
            y: this.big_img_size.height - this.big_box_size.height,
        }

        this.bindEvent();
    }

    bindEvent() {
        //保存实例对象; 
        let mag_instance = this;
        this.small_box_ele.onmouseover = function () {
            // 让元素显示; 
            // 想在事件处理函数之中访问实例对象; 
            // 事件里面的this指向的是dom对象; 
            mag_instance.showEles();
        }
        this.small_box_ele.onmouseout = function () {
            // 让元素隐藏; 
            mag_instance.hideEles();
        }
        // 鼠标绑定一个移动事件; 
        this.small_box_ele.onmousemove = function (evt) {

            let e = evt || event;

            // x = 鼠标距离可是窗口的x值，- 外包围距离窗口的值 - focus元素一般的宽高; 
            let x = e.clientX - mag_instance.container_offset.x - mag_instance.focus_size.width / 2;
            let y = e.clientY - mag_instance.container_offset.y - mag_instance.focus_size.height / 2;
            // 边界检测 : 找极值 ( 最小值，最大值 );
            // 最小值判断 : 
            if (x <= 0) {
                x = 0;
            }
            if (y <= 0) {
                y = 0;
            }
            // 计算 x, 和y的最大位移距离： 
            var max_x = mag_instance.container_size.width - mag_instance.focus_size.width;
            var max_y = mag_instance.container_size.height - mag_instance.focus_size.height;

            if (x > max_x) {
                x = max_x;
            }
            if (y > max_y) {
                y = max_y;
            }
            // 计算x和y的移动比例; 
            let prop_x = x / max_x;
            let prop_y = y / max_y;

            mag_instance.focusMove(x, y);
            mag_instance.bigImageMove(prop_x, prop_y);
        }
        // 批量绑定事件; 
        for (let i = 0; i < this.tab_eles.length; i++) {
            this.tab_eles[i].onmouseover = function () {
                // 我们要获取当前元素上的两个src数据
                let small_img_src = this.getAttribute("data-url-small");
                let big_img_src = this.getAttribute("data-url-big");

                mag_instance.changeImg(small_img_src, big_img_src);
            }
        }
    }
    showEles() {
        // 让两个盒子显示出来; 
        this.focus_ele.style.display = "block";
        this.big_box_ele.style.display = "block";
    }
    hideEles() {
        this.focus_ele.style.display = "none";
        this.big_box_ele.style.display = "none";
    }
    focusMove(x, y) {
        this.focus_ele.style.left = x + "px";
        this.focus_ele.style.top = y + "px";
    }
    bigImageMove(prop_x, prop_y) {
        // 获取大图移动x,y的算法; 
        // 获得大图x值位移的最大距离;  大图图片宽度 - 大图焦点部分宽度; 
        // 获的大图y值位移的最大距离;  大图图片高度 - 大图焦点部分高度; 
        this.big_img_ele.style.left = -this.big_max.x * prop_x + "px";
        this.big_img_ele.style.top = -this.big_max.y * prop_y + "px";
    }
    changeImg(small_src, big_src) {
        this.small_img_ele.src = small_src;
        this.big_img_ele.src = big_src;
    }

}

new Magnifier();